<template>
  <!-- 登录页面 -->
  <div id="my-header">
    <div class="header-box">
      <el-row :gutter="0">
        <el-col :span="3">
          <div class="grid-content">
            <p class="header-p">青云博客</p>
          </div>
        </el-col>

        <el-col :span="3" :offset="18">
          <el-dropdown @command="handleCommand" v-if="loginUserInfo != null">
            <span class="el-dropdown-link">
              {{ loginUserInfo.nickName }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="updPwd">修改密码</el-dropdown-item>
              <el-dropdown-item command="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div v-else>
            未登陆
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import {
    logout
} from '@/api/auth'
import {
    Message
} from 'element-ui'

export default {
    name: 'my-header',
    data () {
        return {
            loginUserInfo: {
                id: null,
                userName: null,
                nickName: null,
                phone: null,
                email: null
            }
        }
    },
    methods: {
        handleCommand (command) {
            if (command === 'updPwd') {
                this.$message('click on item ' + command)
            } else if (command === 'logout') {
                logout().then((response) => {
                    if (response.code === 200) {
                        // tip信息提示
                        Message.success({
                            message: response.message
                        })
                        window.sessionStorage.clear()
                        this.$router.push('/')
                    } else {
                        // tip信息提示
                        Message.warning({
                            message: response.message
                        })
                    }
                })
            }
        }
    },
    mounted () {
        let userInfo = window.sessionStorage.getItem('userInfo')
        if (userInfo) {
            let user = JSON.parse(userInfo)
            this.loginUserInfo.id = user.id
            this.loginUserInfo.userName = user.userName
            this.loginUserInfo.nickName = user.nickName
            this.loginUserInfo.phone = user.phone
            this.loginUserInfo.email = user.email

            console.log(this.loginUserInfo)
        } else {
            Message.error({
                message: '用户未登陆'
            })
            this.$router.push('/')
        }
    }
}
</script>

<style scoped>
#my-header {
  width: auto;
  height: 100%;
}

.el-row {
  height: 100%;
}

.el-col {
}

.header-box {
  width: 100%;
  height: 100%;
  margin: 0px;
  height: 0px;
}

.grid-content {
  height: 50px;
  line-height: 50px;
}

.header-p {
  color: #00aaff;
  font-size: 18px;
  font-weight: 600;
}

/* 下拉 */
.el-dropdown-link {
  cursor: pointer;
  color: #00aaff;
}

.el-icon-arrow-down {
  font-size: 14px;
}
</style>
